<template>
    <Card>
        <Form ref="searchData" :model="searchData"  label-colon autocomplete="off" >
            <Row style="height: 40px">
                <Col span="8">
                    <FormItem  prop="clientId" label="编号" :label-width="80">
                      <label>
                        <Input v-model="searchData.clientId" clearable/>
                      </label>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem  prop="valid" label="授权模式" :label-width="100">
                      <label>
                        <Select v-model="searchData.authorizedGrantTypes" clearable >
                          <Option value="password">密码模式</Option>
                          <Option value="authorization_code">授权码模</Option>
                          <Option value="refresh_token">刷新模式</Option>
                          <Option value="client_credentials">客户端模式</Option>
                          <Option value="implicit">简化模式</Option>
                        </Select>
                      </label>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem style="margin-left: 2em">
                        <Button type="primary" @click="queryData(true)"><Icon type="ios-search" />查询</Button>
                        <Button style="margin-left: 2em" type="primary" ghost @click="handleReset('searchData')"><Icon type="md-sync" />重置</Button>
                    </FormItem>
                </Col>
            </Row>
          <permission-button-group @handleEvent="handleEvent" permission-code-prefix="client_"/>
        </Form>

        <div>
          <Table border ref="selection" :columns="columns" :data="resultData"  @on-selection-change="selectItem"></Table>
        </div>
        <div class="ivu-mt ivu-text-center">
          <Page :total="pager.total" :current="pager.current" show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange" :show-sizer="true"/>
        </div>
        <client-details :title="modalTitle" :show-modal="showModal" :can-edit="canEdit" :client-id="clientId"
              :reload-data="true" @callbackByCancel="callbackByCancel" @callbackByOk="callbackByOk"/>
    </Card>

</template>

<script>
    import {search,deleteData} from '@/api/clientApi'
    import ClientDetails from '@/views/settings/client/components/client-details'
    import PermissionButtonGroup from "@/components/permissionButton/permission-button-group";
    export default {
        components: {
          ClientDetails,
            PermissionButtonGroup
        },
        data () {
            return {
                showModal: false,
                modalTitle: '',
                canEdit: false,
                selectItems: [],
                clientId:null,
                searchData:{
                  clientId: '',
                  authorizedGrantTypes: ''
                },
                ruleValidate: {

                },
                pager:{
                    size:10,
                    current: 1,
                },
                resultData: [],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                      title: '客户端ID',
                      width: 100,
                      key: 'clientId',
                      align: 'center'
                    },
					{
					  title: '客户端名称',
					  width: 120,
					  key: 'clientName',
					  align: 'center'
					},
                   {
                     title: '授权模式',
                     key: 'authorizedGrantTypes',
                     align: 'center',
                     render: (h, params) => {
                       let authorizedGrantTypes = params.row.authorizedGrantTypes.split(',');
                       let tags = [];
                       authorizedGrantTypes.forEach(item=>{
                         if (item==='password'){
                           tags.push(h('Tag',{
                             props:{color:'volcano'}},'密码模式'))
                         }else if (item==='authorization_code'){
                           tags.push(h('Tag',{
                             props:{color:'blue'}},'授权码模'))
                         }
                         else if (item==='refresh_token'){
                           tags.push(h('Tag',{
                             props:{color:'cyan'}},'刷新模式'))
                         }
                         else if (item==='client_credentials'){
                           tags.push(h('Tag',{
                             props:{color:'primary'}},'客户端模式'))
                         }
                         else if (item==='implicit'){
                           tags.push(h('Tag',{
                             props:{color:'warning'}},'简化模式'))
                         }
                       })
                       return h('span',tags)
                     }
                   },
                  {
                    title: '令牌时效',
                    key: 'accessTokenValidity',
                    width: 100,
                    align: 'center'
                  },
                    {
                        title: '回调地址',
                        key: 'webServerRedirectUri',
                        align: 'center'
                    }
                ]
            }
        },
        created(){

        },
        mounted(){
            this.queryData()
        },
        methods: {
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            pageChange(page){
                this.pager.current = page
                this.queryData()
            },
            pageSizeChange(pageSize){
                this.pager.size = pageSize
                this.pager.current = 1
                this.queryData()
            },
            queryData(isSearch){
              if (isSearch){
                this.pager.current = 1
              }
              search({
                    pager:this.pager,
                    queryData:{
                      clientId: this.searchData.clientId,
                      authorizedGrantTypes: this.searchData.authorizedGrantTypes
                    }
              }).then( res => {
                    this.resultData = res.records
                    this.pager.total = res.total
              })
            },
            callbackByCancel () {
                this.showModal = false
            },
            callbackByOk(){
                this.showModal = false
                this.queryData()
            },
            selectItem(row){
                this.selectItems = row
            },
            handleEvent(event){
                if (event==='client_add'){
                    this.modalTitle = '添加客户端'
                    this.clientId = null
                    this.canEdit = true
                    this.showModal = true
                }else{
                    if (this.selectItems.length===0){
                        this.$Message.error('请先选择数据，后操作！')
                        return
                    }
                    if (event ==='client_view'||event ==='client_edit'){
                        this.canEdit = event !== 'client_view'
                        this.modalTitle = '客户端'
                        this.clientId = this.selectItems[0].clientId
                        this.showModal = true
                    }
                    if (event ==='client_delete'){
                        let selectDataIds = []
                        this.selectItems.forEach((item) => {
                            selectDataIds.push(item.clientId)
                        })
                        deleteData(selectDataIds).then(res=>{
                            this.$Message.success('删除成功！')
                            this.queryData(true)
                        })
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>